<template>
  <div class="list bg-white px-3 mb-0">
    <buttonSearch :showSearch="false" class="pt-3">
      <template #left>
        <!-- 左边按钮 -->
        <el-button type="primary" size="mini" @click="openModal(false)"
          >添加类型</el-button
        >
        <el-button type="danger" size="mini" @click="delAll"
          >批量删除</el-button
        >
      </template>
    </buttonSearch>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px; margin-bottom: 60px"
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
        @selection-change="handleSelectionChange"
      >
      </el-table-column>
      <el-table-column prop="name" label="类型名称" width="180">
      </el-table-column>
      <el-table-column label="属性名称" align="center" width="380">
        <template v-slot="scope">
          {{ scope.row.value_list | getValue }}
        </template>
      </el-table-column>
      <el-table-column prop="order" label="排序" align="center" width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="180">
        <template v-slot="scope">
          <div class="d-flex flex-column align-items-center">
            <el-button
              plain
              :type="scope.row.status ? 'success' : 'danger'"
              size="mini"
              @click="changeStatus(scope.row)"
            >
              {{ scope.row.status ? "启用" : "禁用" }}
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button-group class="d-flex align-items-center">
            <el-button
              type="success"
              plain
              size="mini"
              @click="openModal(scope)"
              >编辑</el-button
            >
            <el-button type="danger" plain size="mini" @click="delItem(scope)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-footer
      class="d-flex align-items-center p-0 border-top position-fixed elFoot"
    >
      <div class="pl-2">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-footer>
    <!-- 添加规格对话框 -->
    <el-dialog
      title="添加类型"
      :visible.sync="dialogVisible"
      width="80%"
      top="5px"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="类型名称" prop="name">
          <el-input
            v-model="form.name"
            placeholder="类型名称"
            size="mini"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="form.number"
            :min="1"
            :max="10"
            label="排序"
            size="mini"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status" size="mini">
            <el-radio :label="true" border>启用</el-radio>
            <el-radio :label="false" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联规格">
          <div class="d-flex">
            <span
              class="border rounded px-2 skulist text-center mr-2"
              style="line-height: 2.5"
            >
              <font>颜色</font>
              <i class="el-icon-delete"></i>
            </span>
            <el-button class="el-icon-plus" size="mini"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="属性列表">
          <!-- 属性列表 -->
          <el-table :data="value_list" style="width: 100%">
            <el-table-column label="排序" width="80">
              <template v-slot="scope">
                <el-input
                  v-model="scope.row.order"
                  size="mini"
                  placeholder="排序"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="属性名称" width="150">
              <template v-slot="scope">
                <el-input
                  v-model="scope.row.name"
                  size="mini"
                  placeholder="属性名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="所属类型" width="130">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.select.value"
                  placeholder="请选择所属类型"
                  size="mini"
                >
                  <el-option
                    v-for="(item, index) in scope.row.select"
                    :key="index"
                    :label="item.value"
                    :value="item.type"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否显示" width="80">
              <template v-slot="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="属性值">
              <template v-slot="scope">
                <el-input
                  type="textarea"
                  v-model="scope.row.value"
                  :rows="1"
                  size="mini"
                  placeholder="一行为一个属性值，多个属性值换行输入"
                  v-if="scope.row.isEdit"
                ></el-input>
                <span v-else>{{ scope.row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template v-slot="scope">
                <el-button
                  v-if="(scope.row.select.type = 'input')"
                  type="primary"
                  plain
                  size="mini"
                  @click="edit(scope)"
                >
                  {{ scope.row.isEdit ? "完成" : "编辑属性值" }}
                </el-button>
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click="delValue(scope)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- /属性列表 -->
          <el-button type="text" @click="addValue">+ 添加一个属性</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  data() {
    return {
      superSearch: false,
      //   商品类型
      options: ["区域一", "区域二"],
      // 商品列表数据
      tableData: [
        {
          id: 1,
          name: "鞋子",
          order: 50,
          status: 1,
          sku_list: [
            { id: 1, name: "颜色" },
            { id: 2, name: "尺寸" },
          ],
          value_list: [
            {
              order: 50,
              name: "特技",
              select: [
                {
                  type: "input",
                  value: "输入框",
                },
                {
                  type: "radio",
                  value: "单选框",
                },
                {
                  type: "checkbox",
                  value: "多选框",
                },
              ],
              status: 0,
              isEdit: false,
            },
            {
              order: 50,
              name: "前置摄像头",
              select: [
                {
                  type: "input",
                  value: "输入框",
                },
                {
                  type: "radio",
                  value: "单选框",
                },
                {
                  type: "checkbox",
                  value: "多选框",
                },
              ],
              status: 0,
              isEdit: false,
            },
          ],
        },
      ],
      multipleSelection: [],
      currentPage: 1,
      dialogVisible: false,
      form: {
        name: "",
        number: 1,
        order: 50,
        status: 1,
        sku_list: [],
      },
      value_list: [],
      rules: {
        name: [
          { required: true, message: "类型名称不能为空", trigger: "blur" },
        ],
      },
      editIndex: -1,
    };
  },
  components: {
    buttonSearch,
  },
  filters: {
    getValue(val) {
      let str = val.map((v) => v.name);
      return str.join(","); // 数组转为字符串
    },
  },
  created() {},
  computed: {},
  watch: {},
  methods: {
    delValue(scope) {
      this.value_list.splice(scope.$index, 1);
    },
    edit(scope) {
      scope.row.isEdit = !scope.row.isEdit;
    },
    addValue() {
      this.value_list.push({
        order: 50,
        name: "特性",
        select: [
          {
            type: "input",
            value: "输入框",
          },
          {
            type: "radio",
            value: "单选框",
          },
          {
            type: "checkbox",
            value: "多选框",
          },
        ],
        status: 0,
        isEdit: false,
      });
    },
    // 批量删除
    delAll() {
      if (this.multipleSelection.length === 0) {
        return this.$message({
          message: "未选择删除项",
          type: "info",
        });
      }
      this.$confirm("是否批量删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.multipleSelection.forEach((item1) => {
            let index = this.tableData.findIndex(
              (item2) => item2.id === item1.id
            );
            if (index !== -1) {
              this.tableData.splice(index, 1);
            }
            this.multipleSelection = [];
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delItem(item) {
      this.$confirm("是否删除该规格?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(item.$index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openModal(e) {
      if (!e) {
        // 初始化表单
        this.form = {
          name: "",
          number: 1,
          order: 50,
          status: 1,
          sku_list: [],
        };
        this.value_list = [];
        this.editIndex = -1;
      } else {
        this.form = {
          ...e.row,
        };
        this.value_list = e.row.value_list
        this.editIndex = e.$index;
      }
      this.dialogVisible = true;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        let result = true;
        let messgae = [];
        this.value_list.forEach((item, index) => {
          if (item.order == "") {
            result = false;
            let no = `第${index + 1}行`;
            messgae.push(no + "排序不能为空");
          }
          if (item.name == "") {
            result = false;
            let no = `第${index + 1}行`;
            messgae.push(no + "属性名称不能为空");
          }
        });
        if (!result) {
          let temp = "";
          messgae.forEach((v) => {
            temp += `<div>${v}</div>`;
          });
          return this.$notify({
            title: "警告",
            dangerouslyUseHTMLString: true,
            message: `<ul>${temp}</ul>`,
            duration: 3000,
            type: "warning",
          });
        }
        if (!valid) return;
        let msg = "";
        // 添加表单内容
        if (this.editIndex === -1) {
          this.tableData.unshift({
            ...this.form,
            value_list: [...this.value_list]
          });
          msg = "添加内容成功";
        } else {
          // 修改表单内容  this.tableData[this.editIndex] = this.form一起修改有问题 只能单个进行修改
          let item = this.tableData[this.editIndex];
          item.name = this.form.name;
          item.order = this.form.order;
          item.status = this.form.status;
          item.sku_list = this.form.sku_list;
          item.value_list = this.form.value_list
          msg = "修改内容成功";
        }
        this.dialogVisible = false;
        this.$message({
          message: msg,
          type: "success",
        });
      });
    },
    // 改变商品状态
    changeStatus(item) {
      item.status = !item.status;
      this.$message({
        message: item.status ? "启用" : "禁用",
        type: "success",
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
/deep/.el-dialog__body {
  padding: 15px 20px;
}
.skulist {
  width: 50px;
}
.skulist:hover {
  cursor: pointer;
  background-color: #f4f4f4;
}
.skulist > i {
  display: none;
}
.skulist:hover > font {
  display: none;
}
.skulist:hover > i {
  display: inline-block;
}
</style>
